<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/5/27
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>商品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="css/base.css">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/index.js" defer></script>
    <script type="text/javascript" src="js/goods.js" defer></script>
</head>
<body>

<jsp:include page="header.jsp"></jsp:include>
<!-- 回到顶部按钮 -->
<button id="backToTop">
    ⇧<br>回顶部
</button>
<div class="container goods_list">
<%--    左侧边栏，显示所有商品分类详情--%>
    <div class="sidebar">
        <ul class="sidebar-category-list">
<%--            添加高亮，表示处于当前商品分类界面下--%>
            <li class="${id==0 ? 'goods_list_active' : ''}"><a href="/goods_list?categoryId=0">全部商品</a></li>
            <c:forEach items="${categoryList}" var="t">
                <li class="${id==t.id ? 'goods_list_active' : ''}"><a href="/goods_list?categoryId=${t.id}" >${t.name}</a></li>
            </c:forEach>
        </ul>
    </div>

<%--    具体的商品列表--%>
    <div class="goods-card-list">
        <c:forEach items="${productList}" var="g">
            <a href="/goods_detail?productId=${g.id}" class="goods-card-a">
                <div class="goods-card">
                    <div class="card-img">
                        <img alt="商品图片" src="<c:url value='${g.image1}'/>">
                    </div>
                    <div class="card-information">
                        <h3 class="goods-title">${g.name}</h3>
                        <span class="goods-price">￥${g.price}</span>
                        <span class="goods-is-bargain">
                            <c:choose>
                                <c:when test="${g.is_bargain=='true'}">支持砍价</c:when>
                                <c:otherwise>不支持砍价</c:otherwise>
                            </c:choose>
                        </span>
                    </div>
                </div>
            </a>
        </c:forEach>
    </div>

</div>

</body>
</html>
